<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>琦琦众筹</title>

<link rel="stylesheet"
	href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" th:href="@{/css/guide.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/index.two.css}" />

<link
	href='https://fonts.googleapis.com/css?family=Vollkorn|Lato:400,700'
	rel='stylesheet' type='text/css' />
<link rel="stylesheet" type="text/css" th:href="@{/css/reset.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/demo.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />

<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />

<script th:src="@{/js/jquery.min.background.red.js}"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
<script type="text/javascript"
	th:src="@{/jquery-validation/jquery.validate.min.js}"></script>
<script type="text/javascript"
	th:src="@{/jquery-validation/localization/messages_zh.min.js}"></script>
<script type="text/javascript" th:src="@{/layer/layer.js}"></script>
<script type="text/javascript" th:src="@{/js/common.js}"></script>

</head>
<script>
	function toSearchCommonWeal(){
		window.location.href="/search/searchType?type=1";
	}
	function toSearchArt(){
		window.location.href="/search/searchType?type=2";
	}
	function toSearchAgriculture(){
		window.location.href="/search/searchType?type=3";
	}
	function toSearchPublish(){
		window.location.href="/search/searchType?type=4";
	}
	function toSearchAmusement(){
		window.location.href="/search/searchType?type=5";
	}
	function toSearchOther(){
		window.location.href="/search/searchType?type=6";
	}
</script>
<script>
	function exit(){
		$.ajax({
			url:"/login/loginOut",
			type:"POST",
			data:{},
			success:function(data){
				if(data.code == 0)
					window.location.href="/fore/index";
				else{
					layer.msg("未知错误");
				}
			},
			error:function(){
				layer.msg("未知错误");
			}
		});
	}
</script>
<script th:inline="javascript">  
	$(document).ready(function(){  
		var username = /*[[${flag}]]*/;
		var messageNum = /*[[${messageNum}]]*/;
		if(username != "unlogin"){  //已登录状态
			document.getElementById("div_button").style.display="none";
			document.getElementById("div_head_image").style.display="inline";
		}
		else{
			document.getElementById("div_head_image").style.display="none";
			document.getElementById("div_button").style.display="inline";
		}
		if(messageNum == 0){
			document.getElementById("head_message_num").style.display="none";
			document.getElementById("message_num").style.display="none";
		}
	});
</script>


<body>
	<!--  -->
	<div class="the-bigest-container">
		<header role="banner" class="probootstrap-header">
			<div class="container">
				<a href="/fore/index" class="probootstrap-logo">QAQ
					CrowdFunding<span></span>
				</a> <a href="#" class="probootstrap-burger-menu visible-xs"><i>Menu</i></a>
				<div class="mobile-menu-overlay"></div>

				<nav role="navigation" class="probootstrap-nav hidden-xs">
					<div class="button_su">
						<span class="su_button_circle"> </span> <a href="/launch/toLaunch"
							class="button_su_inner"> <span class="button_text_container">
								发起众筹 </span>
						</a>
					</div>
				</nav>
				<nav role="navigation" class="probootstrap-nav_login hidden-xs">
					<div class="button_su_login" id="div_button">
						<span class="su_button_circle"> </span> <a href="#"
							class="button_su_inner_login"> <span
							class="button_text_container"
							onclick="window.location.href='/login/toLogin';"> 登录 </span>
						</a>
					</div>
				</nav>
				<div class="head-image" id="div_head_image"
					onclick="window.location.href='/fore/home'">
					<img th:src="@{/img/head.png}" class="round_icon" alt=""
						style="cursor: pointer">
					<div class="news-alert-head" id="head_message_num"
						th:text="${messageNum}"></div>
					<div class="head-image-table">
						<div class="head-image-nickname" th:text="${flag}"
							style="cursor: pointer"></div>
						<div class="head-image-button" style="cursor: pointer">个人信息</div>
						<div class="head-image-button" style="cursor: pointer">账户详情</div>
						<div class="head-image-button" style="cursor: pointer">我的订单</div>
						<div class="head-image-button" style="cursor: pointer">我的发起</div>
						<div class="head-image-button" style="cursor: pointer">设置</div>
						<div class="head-image-button" style="cursor: pointer">
							消息
							<div class="news-alert-news" id="message_num"
								th:text="${messageNum}"></div>
						</div>
						<div class="head-image-button" style="cursor: pointer"
							onclick="exit()">退出</div>

					</div>
				</div>
				<div class="search d7">
					<form action="/search/searchKeyword" method="get">
						<input type="text" name="keyword" placeholder="搜索从这里开始..." />
						<button type="submit"></button>
					</form>
				</div>


			</div>
		</header>

		<div class="slider">
			<div class="cd-radial-slider-wrapper">
				<ul class="cd-radial-slider" data-radius1="60" data-radius2="1364"
					data-centerx1="110" data-centerx2="1290">
					<li class="visible">
						<div class="svg-wrapper">
							<svg viewBox="0 0 1400 800">
                                    <title>Animated SVG</title>
                                    <defs>
                                        <clipPath id="cd-image-1">
                                            <circle id="cd-circle-1"
									cx="110" cy="400" r="1364" />
                                        </clipPath>
                                    </defs>
            
                                    <image height='800px' width="1400px"
									clip-path="url(#cd-image-1)" th:href="@{/img/coverIndex1.jpg}"></image>
                                </svg>
						</div> <!-- .svg-wrapper -->

						<div class="cd-radial-slider-content">
							<div class="wrapper">
								<div>
									<h2>居安当思危，爱心永无价</h2>
									<a href="/detail/showDetail?projID=3" class="cd-btn">查看详情</a>
								</div>
							</div>
						</div> <!-- .cd-radial-slider-content -->
					</li>

					<li class="next-slide">
						<div class="svg-wrapper">
							<svg viewBox="0 0 1400 800">
                                    <title>Animated SVG</title>
                                    <defs>
                                        <clipPath id="cd-image-2">
                                            <circle id="cd-circle-2"
									cx="1290" cy="400" r="60" />
                                        </clipPath>
                                    </defs>
            
                                    <image height='800px' width="1400px"
									clip-path="url(#cd-image-2)" th:href="@{/img/coverIndex2.jpg}"></image>
                                </svg>
						</div> <!-- .svg-wrapper -->

						<div class="cd-radial-slider-content">
							<div class="wrapper">
								<div>
									<h2>领养孤儿小象，将它们从困境中解救！</h2>
									<a href="/detail/showDetail?projID=2" class="cd-btn">查看详情</a>
								</div>
							</div>
						</div> <!-- .cd-radial-slider-content -->
					</li>

					<li>
						<div class="svg-wrapper">
							<svg viewBox="0 0 1400 800">
                                    <title>Animated SVG</title>
                                    <defs>
                                        <clipPath id="cd-image-3">
                                            <circle id="cd-circle-3"
									cx="110" cy="400" r="60" />
                                        </clipPath>
                                    </defs>
            
                                    <image height='800px' width="1400px"
									clip-path="url(#cd-image-3)" th:href="@{/img/coverIndex3.jpg}"></image>
                                </svg>
						</div> <!-- .svg-wrapper -->

						<div class="cd-radial-slider-content">
							<div class="wrapper">
								<div>
									<h2>全国首支众筹女生业余足球队</h2>
									<a href="/detail/showDetail?projID=22" class="cd-btn">查看详情</a>
								</div>
							</div>
						</div> <!-- .cd-radial-slider-content -->
					</li>

					<li class="prev-slide">
						<div class="svg-wrapper">
							<svg viewBox="0 0 1400 800">
                                    <title>Animated SVG</title>
                                    <defs>
                                        <clipPath id="cd-image-4">
                                            <circle id="cd-circle-4"
									cx="110" cy="400" r="60" />
                                        </clipPath>
                                    </defs>
                                    
                                    <image height='800px' width="1400px"
									clip-path="url(#cd-image-4)" th:href="@{/img/coverIndex4.jpg}"></image>
                                </svg>
						</div> <!-- .svg-wrapper -->

						<div class="cd-radial-slider-content">
							<div class="wrapper">
								<div>
									<h2>《paper cranes》中国传媒大学2016级</h2>

									<a href="/detail/showDetail?projID=15" class="cd-btn">查看详情</a>
								</div>
							</div>
						</div> <!-- .cd-radial-slider-content -->
					</li>
				</ul>
				<!-- .cd-radial-slider -->

				<ul class="cd-radial-slider-navigation">
					<li><a href="#0" class="next">Next</a></li>
					<li><a href="#0" class="prev">Prev</a></li>
				</ul>
				<!-- .cd-radial-slider-navigation -->

				<div class="cd-round-mask">
					<svg viewBox="0 0 1400 800">
                            <defs>
                                <mask id="cd-left-mask" height='800px'
							width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
                                    <path fill="white"
							d="M0,0v800h1400V0H0z M110,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S143.137,460,110,460z" />
                                </mask>
            
                                <mask id="cd-right-mask" height='800px'
							width="1400px" x="0" y="0" maskUnits="userSpaceOnUse">
                                    <path fill="white"
							d="M0,0v800h1400V0H0z M1290,460c-33.137,0-60-26.863-60-60s26.863-60,60-60s60,26.863,60,60S1323.137,460,1290,460z" />
                                </mask>
                            </defs>
                        </svg>
				</div>

				<script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script>
				<script th:src="@{/js/snap.svg-min.js}" type="text/javascript"></script>
				<script th:src="@{/js/main.js}" type="text/javascript"></script>
				<!-- Resource jQuery -->
			</div>
		</div>
		<div class="type-guide">
			<nav class="mynav">
				<ul>
					<li><a style="color: #000;" href="#ct1">公益</a></li>
					<li><a style="color: #000;" href="">艺术</a></li>
					<li><a style="color: #000;" href="">农业</a></li>
					<li><a style="color: #000;" href="">出版</a></li>
					<li><a style="color: #000;" href="">娱乐</a></li>
					<li><a style="color: #000;" href="">其它</a></li>
				</ul>
			</nav>
		</div>
		<span class="target"></span>

		<div class="small-introductions">
			<div class="small-introductions-titles">公益</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="com:${commonWeal}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${com.id}}"> <img
							class="cover-image" th:src="${com.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${com.name}"></div>
					<!-- 限制长度 -->
					<div class="General-information"
						th:text="${#strings.substring(com.purpose,0,95)+'......'}"
						th:if="${#strings.length(com.purpose)>100}"></div>
					<div class="General-information" th:text="${com.purpose}"
						th:if="${#strings.length(com.purpose)<100}"></div>
				 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${com.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${com.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${com.targetMoney}"></div>

						</div>
					</div>
				</div>
			</div>

			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchCommonWeal()">更多</button>
			</div>


			<div class="small-introductions-titles">艺术</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="at:${art}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${at.id}}"> <img
							class="cover-image" th:src="${at.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${at.name}"></div>
					<!-- 限制长度 -->
					<div class="General-information"
						th:text="${#strings.substring(at.purpose,0,95)+'......'}"
						th:if="${#strings.length(at.purpose)>100}"></div>
					<div class="General-information" th:text="${at.purpose}"
						th:if="${#strings.length(at.purpose)<100}"></div>
					 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${at.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${at.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${at.targetMoney}"></div>

						</div>
					</div>
				</div>
			</div>
			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchArt()">更多</button>
			</div>


			<div class="small-introductions-titles">农业</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="arg:${agriculture}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${arg.id}}"> <img
							class="cover-image" th:src="${arg.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${arg.name}"></div>
					<!-- 限制长度 -->
					<div class="General-information"
						th:text="${#strings.substring(arg.purpose,0,95)+'......'}"
						th:if="${#strings.length(arg.purpose)>100}"></div>
					<div class="General-information" th:text="${arg.purpose}"
						th:if="${#strings.length(arg.purpose)<100}"></div>

				 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${arg.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${arg.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${arg.targetMoney}"></div>

						</div>
					</div>
				</div>
			</div>
			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchAgriculture()">更多</button>
			</div>

			<div class="small-introductions-titles">出版</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="pub:${publish}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${pub.id}}"> <img
							class="cover-image" th:src="${pub.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${pub.name}"></div>
					<!-- 限制长度 -->
					<div class="General-information"
						th:text="${#strings.substring(pub.purpose,0,95)+'......'}"
						th:if="${#strings.length(pub.purpose)>100}"></div>
					<div class="General-information" th:text="${pub.purpose}"
						th:if="${#strings.length(pub.purpose)<100}"></div>
				 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${pub.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${pub.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${pub.targetMoney}"></div>

						</div>
					</div>
				</div>
			</div>
			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchPublish()">更多</button>
			</div>

			<div class="small-introductions-titles">娱乐</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="amu:${amusement}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${amu.id}}"> <img
							class="cover-image" th:src="${amu.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${amu.name}"></div>
					<div class="General-information"
						th:text="${#strings.substring(amu.purpose,0,95)+'......'}">
					</div>
				 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${amu.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${amu.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${amu.targetMoney}"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchAmusement()">更多</button>
			</div>

			<div class="small-introductions-titles">其它</div>
			<div class="small-introductions-contents">
				<div class="project" th:each="oth:${other}">
					<div class="project-image">
						<a th:href="@{'/detail/showDetail?projID='+${oth.id}}"> <img
							class="cover-image" th:src="${oth.cover}" style="cursor: pointer" />
						</a>
					</div>
					<div class="title" th:text="${oth.name}"></div>
					<!-- 限制长度 -->
					<div class="General-information"
						th:text="${#strings.substring(oth.purpose,0,95)+'......'}"
						th:if="${#strings.length(oth.purpose)>100}"></div>
					<div class="General-information" th:text="${oth.purpose}"
						th:if="${#strings.length(oth.purpose)<100}"></div>
				 
					<div class="main-information">
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">已筹款</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${oth.currentMoney}"></div>
						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">截止日期</div>
							<div style="color: rgb(255, 108, 108);" th:text="${oth.endTime}"></div>

						</div>
						<div class="oneofthree-info">
							<div style="color: rgb(43, 4, 117)">筹款目标</div>
							<div style="color: rgb(255, 108, 108);"
								th:text="￥+${oth.targetMoney}"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="small-introductions-buttons">
				<button class="xuanfu-button" onclick="toSearchOther()">查看更多</button>
			</div>

		</div>
		<div id="ct1" class="waste-words">重庆大学大数据与软件学院@CopyRight2018</div>
	</div>
	<script>
            "use strict";
            
            (function () {
            
              var target = document.querySelector(".target");
              var links = document.querySelectorAll(".mynav a");
              var colors = ["darkblue", "darkblue", "darkblue", "darkblue", "darkblue", "darkblue", "darkblue"];
            
              function mouseenterFunc() {
                if (!this.parentNode.classList.contains("active")) {
                  for (var i = 0; i < links.length; i++) {
                    if (links[i].parentNode.classList.contains("active")) {
                      links[i].parentNode.classList.remove("active");
                    }
                    links[i].style.opacity = "0.25";
                  }
            
                  this.parentNode.classList.add("active");
                  this.style.opacity = "1";
            
                  var width = this.getBoundingClientRect().width;
                  var height = this.getBoundingClientRect().height;
                  var left = this.getBoundingClientRect().left + window.pageXOffset;
                  var top = this.getBoundingClientRect().top + window.pageYOffset +10;
                  var color = colors[Math.floor(Math.random() * colors.length)];
            
                  target.style.width = width + "px";
                  target.style.height = height + "px";
                  target.style.left = left + "px";
                  target.style.top = top + "px";
                  target.style.borderColor = color;
                  target.style.transform = "none";
                }
              }
            
              for (var i = 0; i < links.length; i++) {
                links[i].addEventListener("click", function (e) {
                  return e.preventDefault();
                });
                links[i].addEventListener("mouseenter", mouseenterFunc);
              }
            
              function resizeFunc() {
                var active = document.querySelector(".mynav li.active");
            
                if (active) {
                  var left = active.getBoundingClientRect().left + window.pageXOffset;
                  var top = active.getBoundingClientRect().top + window.pageYOffset;
            
                  target.style.left = left + "px";
                  target.style.top = top + "px";
                }
              }
            
              window.addEventListener("resize", resizeFunc);
        })();</script>

	<script>
        $( ".button_su_inner" ).mouseenter(function(e) {
           var parentOffset = $(this).offset(); 
          
           var relX = e.pageX - parentOffset.left;
           var relY = e.pageY - parentOffset.top;
           $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
           $(this).prev(".su_button_circle").removeClass("desplode-circle");
           $(this).prev(".su_button_circle").addClass("explode-circle");
        
        });
        
        $( ".button_su_inner" ).mouseleave(function(e) {
        
             var parentOffset = $(this).offset(); 
        
             var relX = e.pageX - parentOffset.left;
             var relY = e.pageY - parentOffset.top;
             $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
             $(this).prev(".su_button_circle").removeClass("explode-circle");
             $(this).prev(".su_button_circle").addClass("desplode-circle");
        
        });


        $( ".button_su_inner_login" ).mouseenter(function(e) {
           var parentOffset = $(this).offset(); 
          
           var relX = e.pageX - parentOffset.left;
           var relY = e.pageY - parentOffset.top;
           $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
           $(this).prev(".su_button_circle").removeClass("desplode-circle");
           $(this).prev(".su_button_circle").addClass("explode-circle");
        
        });


        $( ".button_su_inner_login" ).mouseleave(function(e) {
        
        var parentOffset = $(this).offset(); 
   
        var relX = e.pageX - parentOffset.left;
        var relY = e.pageY - parentOffset.top;
        $(this).prev(".su_button_circle").css({"left": relX, "top": relY });
        $(this).prev(".su_button_circle").removeClass("explode-circle");
        $(this).prev(".su_button_circle").addClass("desplode-circle");
   
        });</script>

</body>
</html>